<template>
	<!-- 注册页面的整体盒子 -->
	<div class="reg-container">
		<!-- 注册的盒子 -->
		<div class="reg-box">
			<!-- 标题的盒子 -->
			<div class="title-box"></div>
			<!-- 注册的表单区域 -->
			<el-form style="padding: 0 25px" :model="regForm" :rules="regFormRules" ref="regRef">
				<!-- 用户名  -->
				<el-form-item prop="username">
					<el-input v-model="regForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<!-- 密码 -->
				<el-form-item prop="password">
					<el-input v-model="regForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
				</el-form-item>
				<!-- 确认密码 -->
				<el-form-item prop="repassword">
					<el-input v-model="regForm.repassword" placeholder="请确认密码" prefix-icon="el-icon-lock"></el-input>
				</el-form-item>

				<el-form-item>
					<el-button type="primary" style="width: 100%" @click="regNewUser">注册</el-button>
					<el-link type="info" @click="doLogin">去登录</el-link>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Reg',
		data() {
			// 定义自定义校验函数，用于校验密码是否相同
			var samePwd = (rule, value, callback) => {
				if (value !== this.regForm.password) {
					callback(new Error('两次输入密码不一致！'))
				} else {
					callback()
				}
			}
			return {
				// 存储表单的数据对象
				regForm: {
					username: '',
					password: '',
					repassword: ''
				},
				// 存储表单验证规则对象
				regFormRules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							pattern: /^[a-zA-Z][a-zA-Z0-9]{0,9}$/,
							message: '用户名必须是1-10的字母数字,数字不能开头',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							pattern: /^\S{6,15}$/,
							message: '密码必须是6-15的非空字符',
							trigger: 'blur'
						}
					],
					repassword: [{
						validator: samePwd,
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			// 注册
			regNewUser() {
				// 进行表单预验证
				this.$refs.regRef.validate(async valid => {
					if (!valid) return
					console.log('ok');
					// 发送请求，实现注册
					const {
						data: res
					} = await this.$http.post('/api/reg', this.regForm)
					console.log(res);
					// 注册失败，提示用户
					if (res.code !== 0) return this.$message.error('注册失败!');
					// 注册成功，提示用户
					this.$message.success('注册成功!')
					// 跳转到登录页
					this.$router.push('/login')

				})
			},
			doLogin() {
				this.$router.push('/login')
			}
		}
	}
</script>

<style lang="less" scoped>
	.reg-container {
		background: url('../../assets/images/login_bg.jpg') center;
		background-size: cover;
		height: 100%;

		.reg-box {
			width: 400px;
			height: 335px;
			background-color: #fff;
			border-radius: 3px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			.title-box {
				height: 60px;
				background: url('../../assets/images/login_title.png') center no-repeat;
			}
		}
	}
</style>
